<template>
  <div id="topBar">
    <span id="last" @click="toLast()">&#10094;</span>
    <span id="next" @click="toNext()">&#10095;</span>
    <span @click="SearchBarShow()" title="搜索" v-if="searchOrNot"></span>
    <span :title="light ? '暗色':'亮色'" @click="lightChange()">{{light?'':''}}</span>
    <span  @click="screenChange()" title="全屏"></span>
    <SearchBar v-if="searchBarShow" @click="SearchBarShow()" ref="searchBar"></SearchBar>
  </div>
</template>

<script>
// 导入全屏库
import screenfull from "screenfull";
import SearchBar from "../SearchBar.vue";
export default {
    data() {
        return {
            // 控制搜索浮窗是否显示
            searchBarShow: false,
            // 开光灯状态同步量：同步App组件中的light
            light: false
        }
    },
    props:['searchOrNot'], // 是否显示搜索按钮
    components: {
        SearchBar
    },
    methods: {
        // 切换全屏
        screenChange(){
            screenfull.toggle()
        },
        // 退回上一步
        toLast() {
            window.history.back()
        },
        // 返回下一步
        toNext() {
            window.history.forward()
        },
        // 搜索浮窗显示/隐藏，同时提供给子组件SearchBar作为回调函数
        SearchBarShow() {
            this.searchBarShow = ! this.searchBarShow
        },
        // 开关灯事件
        lightChange() {
            // 让App组件改变全局样式
            this.$bus.$emit('lightChange')
        },
        // 提供回调函数给App组件，同步light变量状态
        topBarLightSynchronous(appLight) {
            this.light = appLight
        },
    },
    mounted() {
        // 为vm.$bus绑定自定义事件,提供函数给App组件，同步TopBar的light变量
        this.$bus.$on('topBarLightSynchronous',this.topBarLightSynchronous)
        // 让App组件发起同步light状态请求
        this.$bus.$emit('lightSynchronous','TopBar')
    },
    beforeDestroy() {
        // 为vm.$bus解绑自定义事件
        this.$bus.$off('topBarLightSynchronous')
    }
}
</script>

<style lang="scss" scoped>
    #topBar {
        position: relative;
        height: 100px;
        padding: 0 50px;
        overflow: hidden;
    }
    span {
        display: inline-block;
        line-height: 100px;
        font-size: $font-size-medium;
        font-weight: $font-weight-medium;
        height: 100%;
        margin: 0 30px;
        transition: all .2s;
        cursor: pointer;
    }
    span:hover {
        color: $color-main-text;
    }
    #last,#next {
        background-color: $color-bar;
        border-radius: 100%;
        height: 50px;
        width: 50px;
        margin-top: 25px;
        text-align: center;
        line-height: 50px;
    }
</style>